<template>
  <div class="Main1">
    <!-- // 礼物页面 -->
    <header class="TopHeader">
      <img
        src="../../../../images//fae98107-94c4-47d1-ab04-f3e21ba7d864.png"
        alt=""
        @click="Gohui"
      />
      <b>我的礼物</b>
    </header>

    <main class="mainJiang">
      <div v-for="item in Crad.list" :key="item.id" class="item">
        <img :src="item.href" alt="" />
        <div>
          <p>{{ item.name }}</p>
          <p>{{ item.timeouts }}</p>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import cup from "../../../../images/Img/cup.png";
import certi from "../../../../images/Img/certificate.png";
import flower from "../../../../images/Img/flower.png";
const router = useRouter();
const Gohui = () => {
  router.go(-1);
};
const formatDate = (date) => {
  return date.toLocaleString("zh-CN", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
    hour12: false, // 使用24小时制
  });
};
const myDate = new Date();
const Crad = reactive({
  list: [
    {
      id: "1",
      name: "唐嫣",
      timeouts: formatDate(myDate),
      href: cup,
      colorList: "green",
    },
    {
      id: "2",
      name: "涂天明",
      timeouts: formatDate(myDate),
      href: certi,
      colorList: "green",
    },
    {
      id: "3",
      name: "郭富城",
      timeouts: formatDate(myDate),
      href: cup,
      colorList: "green",
    },
    {
      id: "4",
      name: "涂山雅雅",
      timeouts: formatDate(myDate),
      href: flower,
      colorList: "green",
    },
  ],
});
</script>

<style lang="scss" scoped>
.TopHeader {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  b {
    margin-left: 40%;
    transform: translateX(-40%);
    font-weight: bold;
  }
}
.mainJiang {
  width: 100%;
  padding-top: 10px;
  height: 92%;
  background: #fff;
}
.Main1 {
  width: 100%;
  height: 100%;
}
.item {
  display: flex;
  margin-top: 20px;
  width: 80%;
  margin-left: 50%;
  transform: translateX(-50%);
  justify-content: space-around;
  background-color: aqua;
  border-radius: 20px;
}
</style>
